<template>
	<div>
		<van-tabs v-model="activeName" @click="onClick" sticky>
			<template v-for="nav in navList">
				<van-tab :title="nav.text" :name="nav.status">
					<template v-if="orderList.length>0">
						<div class="order" v-for="(item, index) in orderList" :key="index">
							<template v-for="cartItem in item.cartInfo">
								<van-cell :title="item.createTime" :border="false" :value="nav.text"
									v-if="cartItem.isReply==0" />
								<van-cell :title="item.createTime" :border="false" value=" " v-else />
								<van-card style="background-color: #FFFFFF;" :num="cartItem.cartNum"
									:price="item.payPrice " :desc="cartItem.productInfo.storeInfo"
									:title="cartItem.productInfo.storeName" :thumb="imgUrls+cartItem.productInfo.image">
									<template #price>
										<span v-if="cartItem.productInfo.isIntegral==1">
											<font size="4" color="#ED6A0C">{{cartItem.productInfo.attrInfo.integral}}
											</font>
											<font size="3" color="#ED6A0C">积分</font>
										</span>
										<span v-else>
											<font size="3" color="#ED6A0C" v-if="item.combinationId==0">￥</font>
											<font size="3" color="#ED6A0C" v-if="item.combinationId!=0">团购价￥</font>
											<font size="4" color="#ED6A0C">{{cartItem.truePrice}}</font>
										</span>
									</template>
									<template #tags>
										<van-tag plain type="danger">{{cartItem.productInfo.attrInfo.sku }}</van-tag>
									</template>
									<template #footer>
										<van-button v-if="item.statusDto.type==0" class="btn"
											@click="payInfo=item;show=true">立即付款</van-button>
										<van-button v-if="item.statusDto.type==0" class="btn"
											@click="cancelOrder(item.orderId)">取消订单</van-button>
										<van-button v-if="item.combinationId!=0" class="btn"
											:to="'/groupBookOk?groupId='+item.pinkId">查看团购</van-button>
										<van-button v-if="item.statusDto.type==1" class="btn"
											@click="$toast.success('已提醒卖家发货！')">提醒发货</van-button>
										<van-button v-if="item.statusDto.type==2" class="btn"
											@click="takeOrder(item.orderId)">确认收货</van-button>
										<van-button class="btn" :to="'/order?key='+item.unique">立即查看</van-button>
										<van-button v-if="item.statusDto.type==4" class="btn"
											@click="delOrder(item.orderId)">删除订单</van-button>
									</template>
								</van-card>
								<van-divider :style="{width: 'calc(100% - 50px)',margin:'0 auto' }" />
							</template>
						</div>
						<van-divider v-if="orderList.length>9" @click="move(nav.status)">点击加载更多</van-divider>
					</template>
					<template v-else>
						<van-empty description="空空如也!" />
					</template>
				</van-tab>
			</template>
		</van-tabs>
		<van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">
			<van-radio-group v-model="radio" v-if="payInfo.payIntegral==0">
				<van-cell center icon="shop-o">
					<!-- 使用 right-icon 插槽来自定义右侧图标 -->
					<template #title>
						<span class="custom-title">余额</span>
					</template>
					<template #label>
						<span class="custom-title">￥{{ userAccount.nowMoney }}</span>
					</template>
					<template #right-icon>
						<van-radio name="1"></van-radio>
					</template>
				</van-cell>
				<van-cell center icon="shop-o">
					<!-- 使用 right-icon 插槽来自定义右侧图标 -->
					<template #title>
						<span class="custom-title">微信</span>
					</template>
					<template #label>
						<span class="custom-title">暂未开通</span>
					</template>
					<template #right-icon>
						<van-radio name="1" disabled></van-radio>
					</template>
				</van-cell>
			</van-radio-group>
			<van-radio-group v-model="radio" v-else>
				<van-cell center icon="shop-o">
					<!-- 使用 right-icon 插槽来自定义右侧图标 -->
					<template #title>
						<span class="custom-title">积分支付</span>
					</template>
					<template #right-icon>
						<van-radio name="1"></van-radio>
					</template>
				</van-cell>
			</van-radio-group>
			<van-button block type="danger" class="btns" @click="pay()">确定</van-button>
		</van-popup>

	</div>
</template>

<script>
	import {
		getOrderList,
		cancelOrder,
		payOrder,
		takeOrder,
		delOrder
	} from "@/api/order.js"
	import {
		getBalance
	} from "@/api/wallet.js"
	export default {
		data() {
			return {
				userAccount: {},
				imgUrls: this.$baseApi,
				radio: "1",
				status: 0,
				show: false,
				navList: [{
						status: 0,
						text: "待付款",
					},
					{
						status: 1,
						text: "待发货",
					},
					{
						status: 2,
						text: "待收货",
					},
					{
						status: 3,
						text: "待评价",
					},
					{
						status: 4,
						text: "已完成",
					},
				],
				activeName: this.$route.query.type * 1,
				limit: 0,
				orderList: [],
				payInfo: {}
			};
		},
		created() {
			this.getList(this.$route.query.type)
			this.getBalance()
		},
		methods: {
			//收货
			takeOrder(id) {
				takeOrder({
					uni: id
				}).then(res => {
					if (res.status == 200) {
						this.$toast.success("收货成功")
						this.activeName = 3
						this.getList(this.activeName)
					}
				})
			},
			//我的钱包数据
			getBalance() {
				getBalance().then(res => {
					this.userAccount = res.data
				})
			},
			pay() {
				payOrder({
					uni: this.payInfo.orderId,
					from: 'h5',
					paytype: this.payInfo.payIntegral == 0 ? 'yue' : 'integral'
				}).then(res => {
					if (res.status == 200) {
						this.$toast.success("支付成功")
						this.getList(this.$route.query.type)
						this.show = false
					}
				})


			},
			//取消订单
			cancelOrder(id) {
				cancelOrder({
					id: id
				}).then(res => {
					if (res.status == 200) {
						this.$toast.success("取消成功")
						this.getList(this.$route.query.type)
					}
				})
			},
			delOrder(id) {
				delOrder({
					uni: id
				}).then(res => {
					if (res.status == 200) {
						this.$toast.success("删除成功")
						this.getList(this.$route.query.type)
					}
				})
			},

			//name为van-tab的name
			onClick(name, title) {
				this.getList(name)
			},
			getList(name, limit) {
				getOrderList({
					type: name,
					limit: limit
				}).then(res => {
					this.orderList = res.data.content
				})
			},
			move(type) {
				if (this.status == type) {
					this.limit += 10
				} else {
					this.limit = 0
					this.limit += 10
				}
				this.status = type
				this.limit += 10
				this.getList(type, this.limit)
			}
		},
	};
</script>

<style scoped>
	.order {
		margin-top: 10px;
		background-color: #FFFFFF;
	}

	.order .btn {
		height: 30px;
		border-radius: 7px;
	}

	.btns {
		width: calc(100% - 30px);
		margin: 10px auto;
	}
</style>
